import { Select } from 'antd'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getChannelAction } from '@/store/action/article'
const { Option } = Select
/**
 * 封装组件的核心：
 * 1. html+css 视图
 * 2. js逻辑
 * 2. js逻辑（获取数据、点击事件等)
 * 3. 设计props父传子属性（api）=》复用最大化目的
 * @param {} param0
 * @returns
 */
// 重点：props接收：value, onChange属性，配合antd的表单组件实现受控
// value, onChange是Form.Item传入的，控制Select
// props api设计
function Channel({ value, onChange, width }) {
  // js逻辑
  // 获取频道数据
  const dispatch = useDispatch()
  const { channelList } = useSelector(state => state.article)
  useEffect(() => {
    dispatch(getChannelAction())
  }, [dispatch])
  // 视图
  return (
    <Select
      placeholder="请选择文章频道"
      // defaultValue="lucy"
      value={value}
      onChange={onChange}
      style={{ width }}
    >
      {channelList.map(item => (
        // 说明：value绑定的值，就是下拉选中获取到的值
        <Option key={item.id} value={item.id}>
          {item.name}
        </Option>
      ))}
      {/* <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option> */}
    </Select>
  )
}

export default Channel
